<template>
  <div style="width: 1200px;margin: 0 auto">
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in contentArr" style="margin: 10px 0">
        <el-card>
          <router-link :to="'/detail?id='+c.id">
            <img :src="BASE_URL+c.imgUrl" style="width: 100%;height: 145px">
            <p class="title_p">{{c.title}}</p>
          </router-link>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="BASE_URL+c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{c.nickname}}
                <span style="font-size: 12px;color: #666;float: right">{{c.categoryName}}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--  内容列表结束  -->
  </div>
</template>

<script setup>
import { onBeforeUpdate, onMounted, ref} from "vue";
import axios from "axios";
  const contentArr = ref([
    {
      "id": 27,
      "title": "家常面包",
      "imgUrl": "/imgs/a.jpg",
      "categoryName": "面包",
      "nickName": "汤姆",
      "userImgUrl": "/imgs/head.jpg"
    },
    {
      "id": 18,
      "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
      "imgUrl": "/imgs/b.jpg",
      "categoryName": "家常菜",
      "nickName": "汤姆",
      "userImgUrl": "/imgs/head.jpg"
    },
    {
      "id": 17,
      "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
      "imgUrl": "/imgs/c.jpg",
      "categoryName": "小食",
      "nickName": "汤姆",
      "userImgUrl": "/imgs/head.jpg"
    },
    {
      "id": 16,
      "title": "蔓越莓绿豆糕，味道还不错值得一试!",
      "imgUrl": "/imgs/d.jpg",
      "categoryName": "面包",
      "nickName": "汤姆",
      "userImgUrl": "/imgs/head.jpg"
    },
  ])
  const loadContents = ()=>{
    if (location.search.includes('type')){//查看某个类型下的所有内容
      let type = new URLSearchParams(location.search).get('type');
      //请求这个类型下的所有内容
      axios.get(BASE_URL+'/v1/contents/'+type+'/list').then((response)=>{
        if (response.data.code==1){
          contentArr.value = response.data.data;
        }
      })
    }
    else if (location.search.includes('wd')){//搜索
      let wd = new URLSearchParams(location.search).get('wd');
      //发出搜索请求
      axios.get(BASE_URL+'/v1/contents/'+wd+'/search').then((response)=>{
        if (response.data.code==1){
          contentArr.value = response.data.data;
        }
      })
    }
  }
  onMounted(()=>{//从其它页面到当前页面时执行, 从当前页面到当前页面时不执行
    loadContents();
  })
  onBeforeUpdate(()=>{//从其它页面到当前页面时不执行, 从当前页面到当前页面时执行
    loadContents();
  })

</script>

<style scoped>
.title_p {
  height: 40px;
  overflow: hidden; /*超出不显示*/
  /*设置省略号相关样式*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置行数*/
  -webkit-box-orient: vertical; /*纵向*/
}
a{
  color: #333;
  text-decoration: none;
}
a:hover{
  color: orange;
}
</style>